<!-- 支持选择父子级、搜索的自定义穿梭框（模型库、数据集---带收藏） -->
<template>
  <!-- 有弹框 -->
  <template v-if="hasModal">
    <a-modal v-model:open="visible" :title="`选择${typeName}`" width="800px" destroy-on-close :mask-closable="false" @ok="onOk">
      <main-module ref="mainModuleRef" v-bind="$props" @change="onChange" @update:checkedIds="onUpdateCheckedIds">
        <template #selected-tools>
          <slot name="selected-tools"></slot>
        </template>
        <template #resultTotal="scoped">
          <slot name="resultTotal" v-bind="scoped"></slot>
        </template>
      </main-module>
    </a-modal>
  </template>
  <!-- 无弹框 -->
  <main-module v-else ref="mainModuleRef" v-bind="$props" @change="onChange" @update:checkedIds="onUpdateCheckedIds">
    <template #selected-tools>
      <slot name="selected-tools"></slot>
    </template>
    <template #resultTotal="scoped">
      <slot name="resultTotal" v-bind="scoped"></slot>
    </template>
  </main-module>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { Form } from 'ant-design-vue'
  import { nextTick, onMounted, ref } from 'vue'

  import MainModule from './components/MainModule.vue'
  import { defaultProps } from './options'
  import { Props, TreeNode } from './types'

  const props = withDefaults(defineProps<Props>(), defaultProps)
  const formItemContext = Form.useInjectFormItemContext() // 刷新表单

  const emits = defineEmits<{
    (e: 'confirm', treeData: any[], checkedIds: string[]): void
    (e: 'change', checkedIds: string[]): void
    (e: 'update:checkedIds', checkedIds: string[]): void
  }>()

  /* MainModule组件逻辑 ----------------------------------------------------- */
  const mainModuleRef = ref<InstanceType<typeof MainModule>>()
  const onChange = (ids: string[]) => {
    emits('change', ids)

    // 无弹窗时，同步更新checkIds
    if (!props.hasModal) {
      emits('update:checkedIds', ids)
    }
    formItemContext.onFieldChange()
  }
  const onUpdateCheckedIds = (ids: string[]) => {
    emits('update:checkedIds', ids)
  }

  /* 弹窗逻辑--------------------------------------------------- */
  const visible = ref<boolean>(false)
  const open = async () => {
    visible.value = true
    await nextTick()
    mainModuleRef.value?.getTreeData()
  }
  const close = () => {
    visible.value = false
  }
  const onOk = () => {
    // 判断是否选择了数据
    if (!mainModuleRef.value!.checkedKeys.length) {
      message.error('请选择数据')
      return
    }

    emits('confirm', mainModuleRef.value!.checkedItems, mainModuleRef.value!.checkedKeys)
    close()
  }
  /* -------------------------------------------------------------- */

  const init = () => {
    if (props.hasModal) {
      return
    }
    mainModuleRef.value?.getTreeData()
  }
  onMounted(init)

  defineExpose({
    open,
    addKey: async (item: TreeNode) => {
      await nextTick()
      mainModuleRef.value?.addKey(item)
    }
    // getTreeData: mainModuleRef.value?.getTreeData,
    // checkedKeys: mainModuleRef.value?.getTreeData,
    // treeData: mainModuleRef.value?.getTreeData
  })
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  .main-box {
    display: flex;
    overflow: hidden;
    width: 736px;
    height: 400px;
    border: 1px solid @border2;
    border-radius: 6px;
  }
</style>
